import React, { useState } from 'react';
import type { MenuProps } from 'antd';
import { ItemType } from 'antd/lib/menu/hooks/useItems';
import { getLocale, getAllLocales, setLocale } from 'umi';
import HeaderDropdown from '../HeaderDropdown';

interface LocalData {
  lang: string,
  label?: string,
  icon?: string,
  title?: string,
}

interface LangUConfigMapType {
  [type: string]: LocalData
  }

interface SelectLangProps {
  globalIconClassName?: string;
  postLocalesData?: (locales: LocalData[]) => LocalData[];
  onItemClick?: Function;
  className?: string;
  reload?: boolean;
  icon?: React.ReactNode;
}

const defaultLangUConfigMap: LangUConfigMapType = {
  'en-US': {
    lang: 'en-US',
    label: 'English',
    icon: '🇺🇸',
    title: 'Language'
  },
  'zh-CN': {
    lang: 'zh-CN',
    label: '简体中文',
    icon: '🇨🇳',
    title: '语言'
  }
};

export const SelectLang: React.FC<SelectLangProps> = (props) => {
  const {
  globalIconClassName,
  postLocalesData,
  onItemClick,
  icon,
  reload,
  ...restProps
} = props;
  const [selectedLang = 'zh-CN', setSelectedLang] = useState(() => getLocale());

  const changeLang = (key: string): void => {
  setLocale(key, reload);
  setSelectedLang(getLocale())
  };

  const defaultLangUConfig = getAllLocales().map((key) => 
    defaultLangUConfigMap[key] || {
      lang: key,
      label: key,
      icon: "🌐",
      title: key,
    }
  );

  const allLangUIConfig =
  postLocalesData?.(defaultLangUConfig) || defaultLangUConfig;

  const menuItemIconStyle = { marginRight: "8px" };

  const inlineStyle = {
    cursor: "pointer",
    padding: "12px",
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: 18,
    verticalAlign: "middle",
  };
  const menuItems: ItemType[] = [];
  allLangUIConfig.map((localeObj) => {
    const icon = <span role="img" aria-label={localeObj?.label || "en-US"} style={menuItemIconStyle}>
      {localeObj?.icon || "🌐"}
    </span>
    const item: ItemType = {
      key: localeObj.lang,
      icon,
      label: localeObj?.label || "en-US"
    }
    menuItems.push(item);
  });
  const onClick: MenuProps['onClick'] = ({ key }) => {
    if (onItemClick) {
      onItemClick(key);
    } else {
      changeLang(key);
    }
  };

  return (
  <HeaderDropdown 
    menu={{
      selectedKeys: [selectedLang],
      onClick: onClick,
      items: menuItems,
    }}
    placement="bottomRight"
    {...restProps}
  >
    <span className={globalIconClassName} style={inlineStyle}>
    <i className="anticon" title={allLangUIConfig[selectedLang]?.title}>
      { icon ?
      icon : (
      <svg
      viewBox="0 0 24 24"
      focusable="false"
      width="1em"
      height="1em"
      fill="currentColor"
      aria-hidden="true"
      >
      <path d="M0 0h24v24H0z" fill="none" />
      <path
        d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "
        className="css-c4d79v"
      />
      </svg>
      )}
    </i>
    </span>
  </HeaderDropdown>
  );
  return <></>
};
